<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id='root'>
       <!-- 绑定class样式 字符串写法 适用于样式类名不确定,需要动态指定-->
      <div class="base" :class="c" @click="changeColor"></div>
      <!-- 绑定样式数组 -->
      <div  :class="arryClass" @click="changeColor"></div>
      <!-- 对象写法 要绑定的样式个数名称确定,但要动态决定是否使用 -->
      <div :class="classObj"></div>

      <!-- 绑定style 样式 对象形式 -->
      <div :class="classObj" :style="styleObj">asdadad</div>
      <!-- 绑定style样式 数组形式-->
      <div :class="classObj" :style="[styleObj,styleObj2]">eeeeeee</div>
      <div :class="classObj" :style="styleArr">aaaaddddd</div>
      
  </div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
   const vm = new Vue({
     el: '#root',
     data: {
        c: 'c1',
        arryClass: ['base','c4','c5'],
        classObj:{
          base: true,
          c5: true,
          c6: true
        },  
        styleObj: {
          fontSize: '40px',
          color: 'red'
        },
        styleObj2:{
          backgroundColor: 'gray',
        },
        styleArr: [  {
            fontSize: '40px',
            color: 'red'
          },
          {
            backgroundColor: 'rgb(205, 230, 197)',
          }
        ]
        
        
     },
     methods: {
      changeColor() {
        const arr = ['c1', 'c2','c3']
        let index = Math.floor(Math.random() * 3)
        this.c = arr[index]
      }
     },
   })
</script>
<style>
  .base{
    width: 350px;
    height: 200px;
    border: black 1px solid;
  }
  .c1{
    background-color: rgb(245, 178, 130);
  }
  .c2{
    background-color: rgb(0, 151, 189);
  }
  .c3{
    background-color: rgb(10, 131, 46);
  }
  .c4{
    margin-top: 20px;
    background-color: rgb(211, 198, 12);
  }
  .c5{
    border-radius: 15px;
  }
  .c6{
    margin-top: 20px;
    background-color: rgb(171, 12, 211);
  }
</style>
</body>
</html>